<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>通过HTML及CSS模拟报纸排版</title>
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<div class="container">
		<header>
			<h1>ife.baidu.com</h1>
			<p>2016.9</p>
		</header>
		<div class="above">
			<div class="above-right">
				<p class="title">About</p>
				<p class="title">Technoloce</p>
				<p class="content">About technologe About technologe About technologe </p>
				<p class="number">700</p>
				<p><span class="num">3.2</span><span class="text-1">css</span><span class="text-2">csscsscsscsscss</span></p>
			</div>
			<div class="pic">
				<div class="green"></div>
				<div class="red"></div>
				<img src="img/top-left.png" alt="">
			</div>
		</div>


		<div class="middle-content">
			<div class="what">
				<h2>What</h2>
				<p>前端前端前前端前端前前端前端前端前端前前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
			</div>
			<div class="when">
				<h2>When</h2>
				<p>前端前端前前端前端前前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
			</div>
			<div class="how">
				<h2>How</h2>
				<p>前端前端前前端前端</p>
				<p>前端前端前前端前端前端</p>
				<p>前端前端前前端</p>
				<p>What--------- <span>40%</span></p>
				<p>What--------- <span>30%</span></p>
				<p>What--------- <span>30%</span></p>
			</div>
		</div>


		<div class="below">
		
			<div class="pic">
				<img src="img/right-center.png" alt="">
				<div class="mask">
					<div><span>前端技术</span><small>前端技术前端技术</small></div>
				</div>
			</div>

			<div class="right-bottom">
				<p>前端前端前前端............<small>前端</small></p>
				<p>前端前端前前端前端........<small>前端</small></p>
				<p>前端前端..................<small>前端</small></p>
				<div class="zero-text">
					<div class="zero">0</div>
					<div class="text">
						<p class="bg">ONE TWO</p>
						<p class="bg">THREE FOUR FIVE</p>
						<P class="sm">hello world hello world hello world</P>
					</div>
				</div>
				<div><span>“</span>world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world <span>”</span></div>
			</div>

			<div class="content">
				<h2>
					<p><strong>THE</strong> TECHNOLOGE</p>
					<p>OF FRONT</p>
					<p>前端技术领域</p>
				</h2>
				<div class="wenzhang">
					<p><span>前</span>前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端<img src="img/left-bottom.png" alt="">前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端</p>
					<p>前端前端前前端前前端前端前前端前端前端前端前端前端前前端前端前端前端端前端前端前前端前端前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前前端前端前前端前端前端前端前前端前端端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端</p>
					<p>前前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前端前前端前端前端前端前前端前端前端前端前端前前端前端前端</p>
				</div>
			</div>
		</div>
		<footer>ife.baidu.com</footer>
	</div>
</body>
</html>